<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-09-13 21:16:35
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-11-10 22:20:50
-->
<template>
  <a-select
    :options="options"
    :value="value"
    @change="onValueChanged"
    v-bind="$props"
    placeholder="请选择角色"
  >
  </a-select>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { useDataStore } from "@/store";
import { storeToRefs } from "pinia";

const emits = defineEmits(["update:value", "change"]);

const props = defineProps({
  value: {
    type: [String],
  },
  emptyText: { type: String },
});

const { roleItems } = storeToRefs(useDataStore());

const options = computed(() => {
  let items = roleItems.value.map((x) => {
    let displayName = x.extraProperties.displayName || x.name;
    return { label: displayName, value: x.name };
  });
  if (props.emptyText) {
    items.splice(0, 0, { label: props.emptyText, value: "" });
  }
  return items;
});

const onValueChanged = (value: string) => {
  emits("change", value);
  emits("update:value", value);
};
</script>

<style lang="less" scoped></style>
